<template>
  <view class="container_qualifications">
    <view class="title">
      <text :class="active === 1 ? 'active' : ''" @click="active = 1">用户信息</text>
      <text :class="active === 2 ? 'active' : ''"
        @click=";(active = 2), getQualificationsImage()">资质管理</text>
    </view>
    <view style="height: 112.83rpx"></view>
    <view class="info" v-if="active === 1">
      <view class="item">
        <text>*</text>
        <text>企业名称</text>
        <text>{{ name || '' }}</text>
      </view>
      <view class="item">
        <text>*</text>
        <text>企业法人</text>
        <text>{{ legalPersonName || '' }}</text>
      </view>
      <view class="item">
        <text>*</text>
        <text>联系方式</text>
        <text>{{ mobile || '' }}</text>
      </view>
      <view class="item-e">
        <text>*</text>
        <text>用户类型</text>
        <text>√</text>
        <text>{{ moldName || '' }}</text>
      </view>
    </view>

    <view class="qualifications" v-if="active === 2">
      <view class="tips" v-if="expireWarning === 'true' || purchaserApplyStatus === 'EXPIRE'"
        @click="clickTips">
        <text>您的相关资质即将过期或已过期，请尽快邮寄。</text>
        <text>></text>
      </view>
      <view class="items">
        <view class="items_title">
          <text>必填信息</text>
          <text>（资料需在有效期内加盖公章）</text>
        </view>
        <view class="items_img">
          <view v-for="(item, index) in requiredList" :key="index">
            <image :src="staticUrl() + '/personalCenter/zzbg.png'"></image>
            <text v-if="item.endTimer" class="endTimer">{{ item.endTimer }}</text>
            <text class="classificationName">{{ item.classificationName }}</text>
          </view>
        </view>
      </view>
      <view class="items">
        <view class="items_title">
          <text>可选信息</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPurchaserInfo, getERPQualificationsStatus } from '@/api/personalCenter/index.js'
import jwtDecode from 'jwt-decode'

export default {
  data () {
    return {
      active: 1,
      purchaserId: '',
      // 过期状态
      expireWarning: '',
      // 资质状态
      purchaserApplyStatus: '',
      // 公司名
      name: '',
      // 联系方式
      mobile: '',
      // 法人
      legalPersonName: '',
      // 企业类型
      moldName: '',
      requiredList: [],
      expiredQualification: []
    }
  },
  onLoad (val) {
    if (val.active) {
      this.active = parseInt(val.active)
    }

    let a = JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext.replace('\\', ''))
    this.purchaserId = a.purchaserId
    this.expireWarning = a.expireWarning
    this.purchaserApplyStatus = a.purchaserApplyStatus
    this.mobile = a.username

    getPurchaserInfo(this.purchaserId).then(res => {
      if (res.code === 200) {
        this.name = res.data.name
        this.legalPersonName = res.data.legalPersonName
        this.moldName = res.data.moldName
      }
    })
    if (this.active === 2) {
      this.getQualificationsImage()
    }
  },
  methods: {
    clickTips () {
      uni.navigateTo({ url: '/subpackage/personalCenter/qualificationsMail' })
    },
    getQualificationsImage () {
      getERPQualificationsStatus(this.purchaserId).then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            this.$set(
              item,
              'endTimer',
              new Date(item.expireTime).getTime() > new Date().getTime() ? '' : '已过期'
            )
          })
          this.requiredList = res.data
          this.requiredList.forEach(i => {
            if (i.endTimer === '已过期') {
              this.expiredQualification.push(i.classificationName)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container_qualifications {
  width: 100%;
  height: 100vh;
  background: #f9f9f9;
}

.title {
  position: fixed;
  top: 0;
  width: 100%;
  line-height: 92rpx;
  text-align: center;
  background: #fff;
  font-size: 33.33rpx;
  font-weight: 500;

  text {
    display: inline-block;
    width: 50%;
  }

  .active {
    color: #2871fc;
  }
}

.info {
  margin: 0 25rpx;

  .item {
    font-size: 29.17rpx;
    padding: 0 0 70rpx 17.36rpx;
    background: #fff;
    border-radius: 10rpx;

    text:nth-child(1) {
      color: #ef231b;
      margin-right: 2rpx;
    }

    text:nth-child(2) {
      margin-right: 59.72rpx;
    }

    text:nth-child(3) {
      color: #b8b8b8;
    }
  }

  .item:nth-child(1) {
    padding-top: 59.03rpx;
  }

  .item-e {
    font-size: 29.17rpx;
    background: #fff;
    margin-top: 20.83rpx;
    padding: 56.94rpx 0 54.86rpx 17.36rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;

    text:nth-child(1) {
      color: #ef231b;
    }

    text:nth-child(2) {
      margin-right: 59.72rpx;
    }

    text:nth-child(3) {
      display: inline-block;
      width: 20rpx;
      height: 20rpx;
      color: #fff;
      font-size: 16rpx;
      font-weight: bold;
      text-align: center;
      background: #2871fc;
      margin-right: 11.11rpx;
      margin-top: 5rpx;
    }

    text:nth-child(4) {
      color: #2871fc;
    }
  }
}

.qualifications {
  margin: 0 25rpx;

  .tips {
    line-height: 94rpx;
    font-size: 28rpx;
    color: #ef231b;
    background: #ffffff;
    border-radius: 10rpx;
    padding-left: 19.44rpx;

    text:nth-child(2) {
      color: #000;
      float: right;
      margin-right: 38.19rpx;
    }
  }

  .items {
    background: #fff;
    border-radius: 10rpx;
    margin-top: 20.83rpx;

    .items_title {
      text:nth-child(1) {
        display: inline-block;
        font-size: 33rpx;
        font-weight: bold;
        color: #261d1d;
        margin-left: 25rpx;
        margin-top: 48.61rpx;
        margin-bottom: 37.5rpx;
      }

      text:nth-child(2) {
        font-size: 21rpx;
        font-weight: 400;
        color: #ef231b;
      }
    }

    .items_img {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      padding: 0 18.06rpx;

      view {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        width: 319.44rpx;

        image {
          width: 272.22rpx;
          height: 194.44rpx;
          padding: 16.67rpx 23.61rpx 38.19rpx;
          background: #f9f9f9;
        }

        .endTimer {
          font-size: 29rpx;
          line-height: 49rpx;
          text-align: center;
          color: #fff;
          background: #ef231b;
          border-bottom-left-radius: 7rpx;
          border-bottom-right-radius: 7rpx;
        }

        .classificationName {
          display: inline-block;
          line-height: 33rpx;
          color: #261d1d;
          font-size: 28rpx;
          text-align: center;
          margin-top: 27.78rpx;
          margin-bottom: 41.67rpx;
        }
      }
    }
  }
}
</style>
